<template>
  <view>
    <!-- 圈子 -->
    <view class="main">
      <view class="main-banner">
        <image class="banner" src="@/static/community/circle.png"></image>
        <view class="mian-top">
          <view class="mian-top-left">
            <span>我的圈子</span>
          </view>
          <view class="mian-top-right">
            <view class="circle" @tap="lookall"> 查看全部 </view>
          </view>
        </view></view
      >
      <view class="main-contain">
        <view
          class="first"
          v-for="(item, index) in data"
          :key="item.id"
          @click="circledetil"
        >
          <image class="img" src="../community-follow/bg.png" mode=""></image>
          <view class="tit">
            <view class="name">{{ item.name }}</view>
            <view class="right">
              <span class="one">{{ item.num }}</span>
              <span class="two">{{ item.act }}</span>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 内容 -->
    <view class="contain">
      <view class="first" v-for="item in contain" :key="item.id">
        <view class="contain-top">
          <image
            class="contain-top-image"
            src="./bg.png"
            mode=""
            @click="circledetil"
          ></image>
          <view class="right">
            <view class="circle">{{ item.circle }}</view>
            <view class="name">
              {{ item.name }} <view class="satus">发布了</view>
            </view>
          </view>
        </view>
        <view class="text">
          <span>{{ item.tt }}</span>
        </view>
        <view class="first-main">
          <view class="title" @tap="goInfo">
            {{ item.neirong }}
          </view>
          <view class="img">
            <image
              class="image"
              :src="v"
              v-for="(v, i) in item.imgs"
              :key="i"
              mode=""
              @tap="showBigImg(v)"
            ></image>
          </view>
          <view class="button">
            <view class="left">
              <image
                class="left-img"
                src="@/static/community/adress.png"
                mode=""
              ></image>
              <view class="adress">{{ item.adress }}</view>
            </view>
            <view class="right">
              <view class="lj">
                <image src="@/static/community/share.png" mode=""></image>
                <!-- <u-icon name="share" color="#ccc" size="40"></u-icon> -->
                <span>{{ item.fenxiang }}</span>
              </view>
              <view class="lj">
                <image src="@/static/community/comment.png" mode=""></image>
                <!-- <u-icon name="chat" color="#ccc" size="40"></u-icon> -->
                <span>{{ item.yuedu }}</span>
              </view>
              <view class="lj">
                <image src="@/static/community/collect.png" mode=""></image>
                <!-- <u-icon name="star" color="#ccc" size="40"></u-icon> -->
                <span>{{ item.like }}</span>
              </view>
              <view class="lj">
                <image src="@/static/community/good.png" mode=""></image>
                <!-- <u-icon name="thumb-up" color="#ccc" size="40"></u-icon> -->
                <span>{{ item.good }}</span>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "community-circle",
  data() {
    return {
      data: [
        { id: 1, name: "跑步爱好者", num: "5211", act: "成员" },
        { id: 2, name: "万能求助圈", num: "5211", act: "成员" },
        { id: 3, name: "蒲公英的约定", num: "5211", act: "成员" },
      ],
      contain: [
        {
          id: 1,
          name: "	C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          tt: "跑步人的一天",
          circle: "跑步爱好者",
          neirong:
            "	SDKsad脑壳is阿里你哦23离开你搜电视里，啊落地哦1 看到你无论是拉可能点哦强迫我觉,得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          fenxiang: "9",
          adress: "成都华阳asdfsfdsfdfafdfafafafasf",
          yuedu: "7",
          like: "9",
          good: "54",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
        {
          id: 2,
          name: "	C***着",
          bq: "运动员",
          time: "2022-09-12 12:00",
          tt: "跑步人的一天",
          circle: "跑步爱好者",
          neirong:
            "	sdasidaojdoqwjdpwqjdpqwpldm的我都问店铺为全面的期望代码委屈偶家无论是拉可能点哦强迫我觉,得前五名的请问你都去我看驱蚊器沃恩请我们请我其ID我红藕no彼迪1312偶就都爱的亲我只你",
          fenxiang: "9",
          adress: "成都华阳",
          yuedu: "7",
          like: "9",
          good: "54",
          imgs: [
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
            require("./bg.png"),
          ],
        },
      ],
    };
  },
  methods: {
    //点击放大图片
    showBigImg(img) {
      let arr = [];
      arr.push(img);
      console.log(arr, "图片的地址");
      uni.previewImage({
        current: 0,
        urls: arr, //必须是网址路径，否则加载不出来，如：http：或https：
      });
    },
    circledetil() {
      console.log(123);
      uni.navigateTo({
        url: "/pages/community/circledetails/circledetails",
      });
    },
    goInfo() {
      uni.navigateTo({
        url: "/pages/community/topiclist/topiclist",
      });
    },
    lookall() {
      uni.navigateTo({
        url: "/pages/community/mycircledetails/mycircledetails",
      });
    },
  },
};
</script>

<style lang="scss">
.main {
  // border: 1px solid #FFFFFF;
  width: 720rpx;
  // height: 500rpx;

  overflow: hidden;
  background-color: #ffffff;
  margin: 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  .main-banner {
    position: relative;
    .banner {
      width: 100%;
      height: 108rpx;
    }
    .mian-top {
      position: absolute;
      top: 0;
      width: 100%;
      height: 108rpx;
      // background-color: #e4e3f5;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .mian-top-left {
        margin-left: 20rpx;
        width: 150rpx;
        height: 100%;
        // border: 1xp solid red;
        line-height: 108rpx;
        font-weight: 400;
        font-size: 16px;
      }
      .mian-top-right {
        margin-right: 20rpx;
        width: 142rpx;
        height: 48rpx;
        border: 1px solid #ffffff;
        text-align: center;
        background-color: #ffffff;
        border-radius: 24rpx;
        font-size: 10px;
        line-height: 40rpx;
      }
    }
  }
  .mian-top {
    width: 100%;
    height: 108rpx;
    // background-color: #e4e3f5;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .mian-top-left {
      margin-left: 20rpx;
      width: 150rpx;
      height: 100%;
      border: 1xp solid red;
      line-height: 108rpx;
      font-weight: 400;
      font-size: 16px;
    }
    .mian-top-right {
      margin-right: 20rpx;
      width: 142rpx;
      height: 48rpx;
      border: 1px solid #ffffff;
      text-align: center;
      background-color: #ffffff;
      border-radius: 24rpx;
      font-size: 10px;
      line-height: 40rpx;
    }
  }
  .main-contain {
    width: 100%;
    // height: 500rpx;
    // border: 1px solid red;
    padding: 10rpx 10rpx;
    .first {
      width: 100%;
      height: 120rpx;
      // border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .img {
        width: 100rpx;
        height: 100rpx;
        border-radius: 10rpx;
        margin-right: 10rpx;
      }
      .tit {
        .right {
          .one {
            color: #a09c99;
            margin-right: 10rpx;
          }
          .two {
            color: #a09c99;
          }
        }
      }
    }
  }
}
.contain {
  width: 750rpx;
  // height: 1210rpx;
  background-color: #ffffff;
  padding: 0 20rpx;
  .first {
    width: 100%;
    // height: 600rpx;
    // border: 1px solid red;
    margin-bottom: 50rpx;
    border-bottom: 1rpx solid #c9c9c9;
    .contain-top {
      width: 100%;
      height: 150rpx;
      // border: 1px solid red;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .contain-top-image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }
      .right {
        width: 300rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .circle {
          margin-bottom: 20rpx;
        }
        .name {
          display: flex;
          .satus {
            color: #ccc;
            margin-left: 10rpx;
          }
        }
      }
    }
    .text {
      font-size: 30rpx;
      font-weight: 400;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      height: 60rpx;
      color: #333;
      font-size: 32rpx;
      font-weight: 500;
      margin-bottom: 10rpx;
      .bq {
        font-size: 10rpx;
        background-color: #b2b2b2;
        padding: 0 20rpx;
        margin-left: 20rpx;
      }
    }
    .first-main {
      width: 100%;
      // height: 200rpx;
      // border: 1px solid red;

      .title {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        font-size: 28rpx;
        color: #434343;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
      }
      .img {
        width: 100%;
        .image {
          width: 220rpx;
          height: 150rpx;
          margin: 0 8rpx;
          border-radius: 10rpx;
          overflow: hidden;
        }
      }
      .button {
        width: 100%;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .left {
			display: flex;
          align-items: center;
          .adress {
			  width: 200rpx;
            color: #f4333c;
            font-size: 24rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-left: 10rpx;
          }
          .left-img {
            width: 22rpx;
            height: 26rpx;
          }
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 300rpx;
          height: 60rpx;
          .lj {
			color: #9D9D9D;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            // justify-content: space-around;
            margin-right: 5rpx;
            image {
              width: 30rpx;
              height: 30rpx;
			  margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
